<template>
  <!-- <div id="product">
  </div> -->
  <el-row id="product">
    <el-col :span="11" id="exhibition-area">
      <div id="img-area">
        <el-image id="product-img" :src="details.imgUrl" :fit="'scale-down'">
        </el-image>
      </div>
    </el-col>
    <el-col :span="13" id="info-area">
      <div id="inner-info-area">
        <div id="product-name">{{ details.name }}</div>
        <div id="product-price">价格：{{ details.points }} 积分</div>
        <div>
          <el-form
            id="order-form"
            :inline="false"
            :model="form"
            label-width="120px"
          >
            <el-form-item label="购买人姓名">
              <el-input v-model="form.receiverName"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.receiverPhone"></el-input>
            </el-form-item>
            <el-form-item label="寄送地址">
              <el-input v-model="form.receiverAddress"></el-input>
            </el-form-item>
            <el-form-item label="购买数量">
              <el-input-number
                v-model="form.numItems"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">购买</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div id="product-description" v-html="details.description"></div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { inject, ref, reactive, onMounted, toRaw } from "vue";
import { useRoute } from "vue-router";
import assert from "assert";

export default {
  name: "Product",
  components: {},
  setup() {
    const route = useRoute();
    const itemType = route.query.itemType;
    const itemID = route.query.itemID;
    const apis = inject("$apis");
    const mall = apis.mall;
    const details = reactive({
      itemType: null,
      itemID: null,
      name: null,
      points: null,
      date: null,
      imgUrl: null,
      description: null,
    });
    const form = reactive({
      receiverName: null,
      receiverPhone: null,
      receiverAddress: null,
      itemType: null,
      itemID: null,
      numItems: 0,
      price: null,
    });
    onMounted(async () => {
      // console.log(props);
      let res = await mall.getProductDetails({
        itemType: itemType,
        itemID: itemID,
      });
      for (let ele in details) {
        details[ele] = res[ele];
      }
    });
    async function onSubmit() {
      let orderForm = form;
      orderForm.itemType = itemType;
      orderForm.itemID = itemID;
      orderForm.price = details.points;
      for (let ele of orderForm) {
        assert.ok(ele != null);
      }
      await mall.submitOrderForm(toRaw(orderForm));
    }
    return {
      details,
      form,
      onSubmit,
    };
  },
};
</script>

<style scoped>
#product {
  height: 100%;
}
#img-area {
  /* width: 100%; */
  height: 60%;
  width: calc(100% - 2 * 10px);
  margin: 20px 10px 20px 10px;

  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
}
#img-area .el-image {
  height: 100%;
}
#product-img {
  /* width: 100%; */
  /* height: 100%; */
}

#inner-info-area {
  width: calc(100% - 2 * 10px);
  margin: 20px 10px 20px 10px;
  text-align: left;
}

#inner-info-area > div {
  margin-bottom: 5px;
}

#product-name {
  font-size: 1.3em;
  font-weight: bold;
}

#product-price {
  background: #cfcfcf;
  padding: 10px;
}
#product-description {
}
</style>